<template>
  <a-modal
    :maskClosable="maskClosable"
    title="迁移"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-item label="数据中心">
          <a-select
            :getPopupContainer="
              (triggerNode) => {
                return triggerNode.parentNode || document.body;
              }
            "
            v-decorator="['datacenterId', decoratorOptions.datacenterId]"
            @change="(v) => loadResourceList(v)"
          >
            <a-select-option
              v-for="d in datacenterList"
              :key="d.datacenterId"
              :value="d.datacenterId"
            >
              {{ d.datacenterName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="云平台资源">
          <a-select
            :getPopupContainer="
              (triggerNode) => {
                return triggerNode.parentNode || document.body;
              }
            "
            v-decorator="['cloudResourceId', decoratorOptions.cloudResourceId]"
          >
            <a-select-option
              v-for="d in cloudresList"
              :key="d.cloudResourceId"
              :value="d.cloudResourceId"
            >
              {{ d.cloudResourceName }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import { gPostAction } from "@/api/manage";
export default {
  name: "TranferModal",
  data() {
    return {
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
    //   datacenterId: "",
      datacenterList: [],
      cloudresList: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      url: {
        datacenterPage: "/scheduler/aviableDatacenter",
      },
      maskClosable: false,
      decoratorOptions: {
        datacenterId: {
          rules: [{ required: true, message: "请选择数据中心" }],
        },
        cloudResourceId: {
          rules: [{ required: true, message: "请选择云平台资源" }],
        },
      },
    };
  },
  methods: {
    loadDatacenterList(data) {
      const postData = {
        type: data.type,
        datacenterId: data.datacenterId,
        cloudResourceId: data.resourceId,
      };
      gPostAction(this.url.datacenterPage, postData).then((res) => {
        this.datacenterList = res.data;
        // if (this.datacenterList.length) {
        //   this.datacenterId = this.datacenterList[0].id;
        // }
      });
    },
    loadResourceList(val) {
      this.form.setFieldsValue({
        cloudResourceId: undefined,
      });
      this.cloudresList = [];
      const postData = {
        type: this.model.type,
        datacenterId: this.model.datacenterId,
        cloudResourceId: this.model.resourceId,
        chosedDatacenterId: val,
      };
      gPostAction(this.url.datacenterPage, postData).then((res) => {
        this.cloudresList = res.data;
        // if (this.datacenterList.length) {
        //   this.datacenterId = this.datacenterList[0].id;
        // }
      });
    },
    tranfer(record) {
      this.model = Object.assign(this.model, record)
      this.datacenterList = []
      this.cloudresList = []
      this.form.resetFields();
      this.loadDatacenterList(record);
      this.visible = true;
    },
    handleOk(e) {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true;
          const postData = {
            instanceId: this.model.instanceId,
            datacenterId: values.datacenterId,
            cloudResourceId: values.cloudResourceId,
          };
          gPostAction("/scheduler/startJob", postData)
            .then((res) => {
              if (res.success) {
                this.$message.success("操作成功");
                this.$emit("ok");
              }
            })
            .finally(() => {
              this.confirmLoading = false;
              this.handleCancel();
            });
        }
      });
    },
    handleCancel(e) {
      this.visible = false;
    },
  },
};
</script>
